<template>
  <div id="vuecontent">
    <el-table
      :data="users"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="140">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="150">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="150">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="160">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="bangding(scope.row.id)"></el-button>
          <el-button type="primary" icon="el-icon-delete" @click="del(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[2, 3, 4, 5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" v-show="total!=0">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: 'vuecontent',
    props:{
      //用户集合
      users:{
        type:[]
      },
      //当前页码
      current:{
        type:SVGAnimatedInteger,
        default:1
      },
      //每页显示条数
      pageSize:{
        type:SVGAnimatedInteger,
        default:2
      },
      //总记录数
      total:{
        type:SVGAnimatedInteger
      },
      //总记录数
      name:{
        type:String,
        default:""
      },
    },
    created: function () {
      var $this = this;
      $this.query($this.current, $this.pageSize);
    },
    methods: {
      query(current, pageSize, name){
        var $this = this;
        $this.axios.get('http://localhost:8082/query',
          {
            params: {
              current: current,
              name: name,
              pageSize: pageSize
            }
          })
          .then(function (response) {
            $this.users = response.data.records;
            $this.total = response.data.total;
          })
      },
      //每页显示条数
      handleSizeChange(val){
        var $this = this;
        $this.pageSize = val;
        $this.query($this.current, $this.pageSize, $this.name);
      },
      handleCurrentChange(val) {
        var $this = this;
        $this.current = val;
        $this.query($this.current, $this.pageSize, $this.name);
      },
      bangding(id) {
        var $this = this;
        $this.dialogVisible = true;
        $this.axios.get('http://localhost:8082/selectOne',
          {
            params: {
              id: id
            }
          })
          .then(function (response) {
            $this.user = response.data;
          })
      },
      del(id) {
        var $this = this;
        $this.axios.delete('http://localhost:8082/delete',
          {
            params: {
              id: id
            }
          })
          .then(function (response) {
            if (response.data == true) {
              $this.query($this.current, $this.pageSize, $this.search.name)
            } else {
              alert('删除失败');
            }
          })
      }
    }
  }
</script>
<style scoped>
</style>
